<template>
  <div class="group-table-box">

    <el-row class="group-top">
      <el-col :span="8" :offset="16" class="group-right">
        <div class="input-item" style="margin: 0;">
          <el-button
            type="primary"
            size="small"
            @click="onClickAddAccount"
          >添加活动商品</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="table-container">
      <el-table
        :data="tableData"
        border
        :header-cell-class-name="'table-header'"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="权限名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="权限备注 ">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="edit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="remove(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="form.pageIndex"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="totalPageCount"
        style="text-align: center;margin-top: 20px;"
      >
      </el-pagination>
    </div>

    <!-- 点击编辑 -->
    <el-dialog
      :visible.sync="showEditModal"
      top="5vh"
    >
      <div class="modal-container">
        <div class="modal-label">
          <span>权限列表</span>
        </div>
        <el-row :gutter="16">
          <el-col :span="12">
            <span>权限名称：</span>
            <el-input
              v-model="form.roleName"
              placeholder="权限名称"
              style="width: auto"
              size="small"
            ></el-input>
          </el-col>
          <el-col :span="12">
            <span>权限备注：</span>
            <el-input
              v-model="form.remark"
              placeholder="权限备注"
              style="width: auto"
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <div class="modal-label">
          <span>权限列表</span>
        </div>
        <el-checkbox-group
          v-model="confirmData.menuIds"
          class="madal-radio-group"
        >
          <template
            v-for="(item, index) in $store.state.authSelect"
          >
            <p style="font-size: 12px;">
              {{ item.title }} :
            </p>
            <template v-for="(itemChild, indexChild) in item.children">
              <el-checkbox
                :label="itemChild.title"
                class="madal-radio"
              >{{ itemChild.title }}</el-checkbox>
            </template>
          </template>
        </el-checkbox-group>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickAddConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 点击添加 -->
    <el-dialog
      :visible.sync="showAddModal"
      top="5vh"
    >
      <div class="modal-container">
        <div class="modal-label">
          <span>权限列表</span>
        </div>
        <el-row :gutter="16">
          <el-col :span="12">
            <span>权限名称：</span>
            <el-input
              v-model="form.roleName"
              placeholder="权限名称"
              style="width: auto"
              size="small"
            ></el-input>
          </el-col>
          <el-col :span="12">
            <span>权限备注：</span>
            <el-input
              v-model="form.remark"
              placeholder="权限备注"
              style="width: auto"
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <div class="modal-label">
          <span>权限列表</span>
        </div>
        <el-checkbox-group
          v-model="confirmData.menuIds"
          class="madal-radio-group"
        >
          <template
            v-for="(item, index) in $store.state.authSelect"
          >
            <p style="font-size: 12px;">
              {{ item.title }} :
            </p>
            <template v-for="(itemChild, indexChild) in item.children">
              <el-checkbox
                :label="itemChild.id"
                class="madal-radio"
              >{{ itemChild.title }}</el-checkbox>
            </template>
          </template>
        </el-checkbox-group>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickAddConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      showEditModal: false,
      showAddModal: false,
      totalPageCount: 10,
      form: {
        id: '',
        remark: '',
        roleName: '',
        gmtCreate: '',
        menuIds: [],
        pageIndex: 1,
        pageSize: 10,
      },
      confirmData: {
        roleName: '',
        remark: '',
        menuIds: []
      },
      tableData: [{
        roleName: '管理员'
      }]
    }
  },
  mounted() {
    // 获取所有菜单及id
    this.getAllMenusData()
    // 获取表格数据
    this.getTableData()
    // 设置权限列表数据
    this.setAuthSelect()
  },
  methods: {
    onClickAddAccount() {
      this.showAddModal = true
    },
    onClickEditConfirm() {
      //  点击修改
    },
    onClickAddConfirm() {
      // 点击添加确认按钮

      // 获取选中的菜单数据
      // 选中的表格数据
      let MenuListData = [{
        title: '首页管理',
        children: []
      },{
        title: '活动管理',
        children: []
      },{
        title: '问卷管理',
        children: []
      },{
        title: '测评管理',
        children: []
      },{
        title: '商城管理',
        children: []
      },{
        title: '报表',
        children: []
      },{
        title: '后台管理',
        children: []
      }]
      for(let i = 0, len = this.confirmData.menuIds.length; i < len; i ++) {
        let thisId = this.confirmData.menuIds[i] || ''
        let arr = thisId.split('-')
        MenuListData[arr[0] - 1]
        .children
        .push(this.$store.state.authSelect[arr[0] - 1].children[arr[1]])
      }
    },
    edit(index) {
      // 点击编辑
      this.showEditModal = true
    },
    remove(index) {
      this.$confirm('确定删除？', '确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      });
    },
    getTableData(index) {

    },
    getAllMenusData() {

    },
    setAuthSelect() {
      this.$store.state.authSelect = [{
        title: '首页管理',
        children: [{
          id: '1-1',
          title: 'banner管理',
          url: '/banner-management'
        },{
          id: '1-2',
          title: '版面图片管理',
          url: '/picture-management'
        }]
      },{
        title: '活动管理',
        children: [{
          id: '2-1',
          title: '活动分类管理',
          url: '/activity-management'
        },{
          id: '2-2',
          title: '活动列表',
          url: '/activity-list'
        }]
      },{
        title: '问卷管理',
        children: [{
          id: '3-1',
          title: '问卷管理',
          url: '/questionnaire'
        }]
      },{
        title: '测评管理',
        children: [{
          id: '4-1',
          title: '测评列表',
          url: '/evaluation'
        }]
      },{
        title: '商城管理',
        children: [{
          id: '5-1',
          title: '商品分类管理',
          url: '/mall-classification'
        },{
          id: '5-2',
          title: '商品列表',
          url: '/mall-list'
        },{
          id: '5-3',
          title: '热门活动管理',
          url: '/mall-hot'
        }]
      },{
        title: '报表',
        children: [{
          id: '6-1',
          title: '订单报表',
          url: '/report-order'
        },{
          id: '6-2',
          title: '用户报表',
          url: '/report-user'
        },{
          id: '6-3',
          title: '申诉报表',
          url: '/report-complaint'
        },{
          id: '6-4',
          title: '开票报表',
          url: '/report-invoice'
        }]
      },{
        title: '后台管理',
        children: [{
          id: '7-1',
          title: '权限管理',
          url: '/background-permission'
        },{
          id: '7-2',
          title: '账号管理',
          url: '/report-account'
        }]
      }]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pull-right {
  float: right;
}
.group-top {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item button {
  color: #fff;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  display: table;
  white-space: nowrap;
  background: 0 0;
  font-weight: 500;
  color: #17233d;
  font-size: 16px;
  margin: 16px 0;
}
.modal-label span {
  font-size: 16px;
  display: inline-block;
  padding: 0 10px;
}
.modal-label:after {
  content: '';
  top: 50%;
  width: 95%;
  display: table-cell;
  position: relative;
  border-top: 1px solid #e8eaec;
  transform: translateY(50%);
}
.modal-label:before {
  content: '';
  top: 50%;
  width: 5%;
  display: table-cell;
  position: relative;
  border-top: 1px solid #e8eaec;
  transform: translateY(50%);
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
.madal-radio-group {

}
.madal-radio {
  width: 20%;
  margin: 10px;
}
</style>
